<template>
  <div>
    <el-header class="el-header">
      <div class="left-panel">
        <el-button type="success" plain>新增</el-button>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="warning" plain>导出</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input placeholder="姓名" clearable></el-input>
          <el-button type="primary" plain icon="el-icon-search"></el-button>
          <el-button type="primary" plain @click="advancedQuery"
            >高级查询</el-button
          >
        </div>
      </div>
    </el-header>
    <!-- 高级检索 -->
    <div class="test">
      <div>
        <h5>输入检索条件:</h5>
        <!-- 检索框 -->
        <div>
          <!-- add/sub检索条件按钮 -->
          <div class="btn">
            <el-button icon="el-icon-plus" type="primary" plain></el-button>
            <el-button
              icon="el-icon-minus"
              size="mini"
              type="primary"
              plain
            ></el-button>
          </div>
          <!-- 第一个检索框，必须要有 -->
          <div class="fristSearch">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                size="mini"
              >
              </el-option>
            </el-select>
            <el-input v-model="input" placeholder="请输入内容" clearable></el-input>
          </div>
        </div>
      </div> 
      <div class="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="advancedQueryClose">关 闭</el-button>
      </div>
    </div>
    <MyTable :columns="columns" ref="tableRef" :data="allList">
      <el-table-column type="selection" width="55" />
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :fixed="index == 0"
          :label="item.name"
          :prop="item.prop"
          v-if="item.show"
          show-overflow-tooltip
          width="180"
        />
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </MyTable>
    <!-- 分页区开始 -->
    <div class="page">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="3"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 分页区结束 -->
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "apply",
  setup() {
    //   类似vue2的data
    const state = reactive({
      // 高级查询
      fiexdSearchForm: false,
      columns: [
        { name: "姓名", show: true, prop: "name" },
        { name: "性别", show: true, prop: "sex" },
        { name: "身份证", show: true, prop: "idCard" },
        { name: "出生日期", show: true, prop: "birthData" },
        { name: "曾用名", show: true, prop: "formerName" },
        { name: "民族", show: true, prop: "national" },
        { name: "政治面貌", show: true, prop: "politicalIandscape" },
        { name: "学历", show: true, prop: "education" },
        { name: "婚姻状况", show: true, prop: "maritalStatus" },
        { name: "手机号", show: true, prop: "mobilePhone" },
      ],
      allList: [
        {
          name: "李明",
          sex: "男",
          idCard: "440883200005031417",
          birthData: "2000-05-03",
          formerName: "",
          national: "汉族",
          politicalIandscape: "共青团员",
          education: "本科",
          maritalStatus: "未婚",
          mobilePhone: "17628098745",
        },
        {
          name: "李明",
          sex: "男",
          idCard: "440883200005031417",
          birthData: "2000-05-03",
          formerName: "",
          national: "汉族",
          politicalIandscape: "共青团员",
          education: "本科",
          maritalStatus: "未婚",
          mobilePhone: "17628098745",
        },
        {
          name: "李明",
          sex: "男",
          idCard: "440883200005031417",
          birthData: "2000-05-03",
          formerName: "",
          national: "汉族",
          politicalIandscape: "共青团员",
          education: "本科",
          maritalStatus: "未婚",
          mobilePhone: "17628098745",
        },
      ],
      //分页数据
      currentPage: 1,
      pageSize: 5,
      visible: false,
      // 测试数据，需要根据实际更改
      options: [{
          value: '选项1',
          label: '1'
        }, {
          value: '选项2',
          label: '2'
        }, {
          value: '选项3',
          label: '3'
        }, {
          value: '选项4',
          label: '4'
        }, {
          value: '选项5',
          label: '5'
        }],
        value: '',
        input:''
    });
    const Methods = {
      // 高级查询
      advancedQuery() {
        let a = document.getElementsByClassName("test")[0];
        a.style.display = "inline";
      },
      advancedQueryClose() {
        let a = document.getElementsByClassName("test")[0];
        a.style.display = "none";
      },
      // 编辑表单开始结束  后面改
      changeColumn(columns) {
        this.columns = columns;
        // this.$refs.table.doLayout()
      },
      handleSizeChange() {
        // console.log(`${val} items per page`)
      },
      handleCurrentChange() {
        // console.log(`current page: ${val}`)
      },
    };
    return {
      ...toRefs(state),
      ...Methods,
    };
  },
});
</script>

<style scoped>
.form-closex {
  display: flex;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.test {
  width: 86.3%;
  height: 200px;
  background-color: #fff;
  position: absolute;
  z-index: 100;
  display: none;
}
.footer {
  position: relative;
}
.btn {
  display: inline-block;
  margin-right: 25px;
}
.btn button {
  padding: 0;
  height: 16px;
}
.fristSearch {
  display: inline-block; 
}
.fristSearch .el-select {
  width: 150px;
}
</style>



